<div id="container">
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字 文字
</div>
<div id="dragable" style="width: 100px; height: 100px; background-color: pink;">
</div>
<script>
    let baseX = 0,
        baseY = 0;
    document.getElementById("dragable").addEventListener("mousedown", () => {
        let startX = event.clientX,
            startY = event.clientY;
        let move = event => {
            console.log(event.clientX, event.clientY);
            let x = baseX + event.clientX - startX;
            let y = baseY + event.clientY - startY;

            document.getElementById("dragable").style.transform = `translate(${x}px, ${y}px)`
        }
        let end = event => {
            baseX = event.clientX - startX;
            baseY = event.clientY - startY;

            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", end);
        }
        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", end)
    })

    let container = document.getElementById("container")

    let ranges = []
    for (let i = 0; i < container.childNodes[0].textContent.length; i++) {
        let range = document.createRange();
        range.setStart(container.childNodes[0], i);
        range.setEnd(container.childNodes[0], i);
        console.log(range.getClientRects())
    }